<template>
  <div class="content">
    <p class="tips">关注你感兴趣的人</p>
      <div class="list">
        <ul>
          <li @click="show" v-for="(item, index1) in user" :key="index1">
            <img :src="item.image" alt="" class="imgs"><span :class="span1"><i class="iconfont icon-trues"></i></span>
            <p>{{item.name}}</p>
          </li>
          <!-- <li @click="show" v-for="(items, index2) in users" :key="index2">
            <img :src="items.headurl" alt="" class="imgs"><span :class="span1"><i class="iconfont icon-trues"></i></span>
            <p>{{items.nickname}}</p>
          </li> -->
        </ul>
      </div>
      <div class="choice" @click="btn">一键关注</div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
  data () {
    return {
      user: [{
        image: 'http://img4.duitang.com/uploads/item/201602/06/20160206025901_JtzEC.thumb.700_0.jpeg',
        name: '小溪'
      }, {
        image: 'http://img0.imgtn.bdimg.com/it/u=3873931720,3231501834&fm=26&gp=0.jpg',
        name: 'momota'
      }, {
        image: 'http://img0.imgtn.bdimg.com/it/u=2577022489,1269768065&fm=26&gp=0.jpg',
        name: 'sandy'
      }, {
        image: 'http://img3.imgtn.bdimg.com/it/u=1069844940,1990511673&fm=26&gp=0.jpg',
        name: '小肖'
      }],
      users: [],
      span1: 'span1'
    }
  },
  created () {
    let data = {
      token: '7qwN83Y2xI2xasQikfLHvwFwLQKxxk5wZyi6Ej+So2Vx1864is3FP2c+zr18HzNAC7fzHZHbmLDWwJraATqJ+cjyp9aSekyCKPoiVit0kHqEJYNu3/HhVAqSW1YJBo9GtG4aH2RSdJ194HC4Slo8wLMBKgvd61ZSGeyJJ80HEnPtUff6/csmpBFsSlXoVRN+DygYwJsRRi2im1HkL0zDJr9GL1nJSxfJLr2+3dEGuEGyDJYuS6aGVaSzY7BCGX2OBspUNJw5BuYR/t3hvUWPCYbfCSehfNHALihJVTJ39LLJ9d/uyc4ciyBA5ZbusTst'
    }
    axios({
      // headers: {
      //   'deviceCode': 'A95ZEF1-47B5-AC90BF3'
      // },
      method: 'post',
      url: 'http://47.99.223.44:8081/userConcern.do',
      data: Qs.stringify(data)
    })
      .then((res) => {
        console.log(res)
        const obj = res.data.list
        this.users = obj
        console.log(this.users)
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    btn () {
      this.$router.push('/life/follow')
    },
    show (e) {
      console.log(e.target.nextSibling)
      if (e.target.nextSibling.className === 'span1') {
        e.target.nextSibling.className = ''
      } else {
        e.target.nextSibling.className = 'span1'
      }
      e.stopPropagation()
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.content {
  .tips {
    @include rect(auto, 0.24rem);
    line-height: 0.24rem;
    background-color: rgba(248, 248, 248, 1);
    color: rgb(136, 136, 136);
    font-size: 0.12rem;
    text-align: center;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 0);
  }
  .list {
    @include rect(100%, 5.3rem);
    background-color: rgba(248, 248, 248, 0.267);
    color: rgb(128, 128, 128);
    font-size: 12px;
    text-align: center;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    font-family: Arial;
    border: 1px solid rgba(243, 239, 239, 0);
    overflow: auto;
    ul {
      @include rect(90%, 100%);
      // @include flexbox();
      // @include justify-content();
      // @include align-items();
      flex-wrap: wrap;
      margin-left: 5%;
      li {
        @include rect(0.74rem, 0.9rem);
        margin: 0.25rem 0.18rem 0 0.18rem;
        float: left;
        position: relative;
        img {
          @include rect(0.74rem, 0.74rem);
          line-height: 20px;
          background-color: rgba(217, 217, 217, 1);
          text-align: center;
          border: 1px solid rgba(255, 255, 255, 0.418);
          border-radius: 50%;
        }
        span {
          display: none;
          position: absolute;
          right: 0rem;
          top: -0.05rem;
          .icon-trues {
            background-color: #F7A226;
            border-radius: 50%;
            color: #fff;
          }
        }
        .span1 {
          display: block;
        }
        .span2 {
          display: none;
        }
      }
    }
  }
  .choice {
    position: fixed;
    left: 1.21rem;
    bottom: 0.7rem;
    width: 1.31rem;
    height: 0.24rem;
    line-height: 0.23rem;
    border-radius: 0.26rem;
    background-color: rgb(250, 235, 235);
    color: rgb(126, 119, 119);
    font-size: 0.16rem;
    text-align: center;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 0);
  }
}
</style>
